<template>
  <div id="myCode">
    <Header :showheaderLeft="false" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain ios" v-if="tip">
      <div class="help">
        <b style="color:red">
          <p>步骤1：点击“已阅读并下载”，弹出框点击允许</p>
          <p>
            <img src="@/assets/img/help/ios1.png" />
          </p>
          <p>步骤2：请返回桌面，点击设置，点击已下载描述档，进入安装</p>
          <p>
            <img src="@/assets/img/help/ios2.png" />
          </p>
          <p>步骤3：输入密码，点击完成</p>
          <p>
            <img src="@/assets/img/help/ios3.png" />
          </p>
          <p>步骤4：再次点击安装</p>
          <p>
            <img src="@/assets/img/help/ios4.png" />
          </p>
          <p>步骤5：确认安装</p>
          <p>
            <img src="@/assets/img/help/ios5.png" />
          </p>
          <p>步骤6：点击完成</p>
          <p>
            <img src="@/assets/img/help/ios6.png" />
          </p>
          <p>步骤7：返回桌面打开APP</p>
          <p>
            <img src="@/assets/img/help/ios7.png" />
          </p>
        </b>
      </div>
    </div>
    <div class="rootMain" v-else>
      <div class="mian">
        <div class="top">
          <div>
            <!-- <img src="@/assets/img/common/GCC@2x.png" alt /> -->
            <p>
              <a href="javascript:void(0)" :title="title" @click="downloadAndroid">立即下载</a>
              <!-- <a :href="androidHref" :title="title">立即下载</a> -->
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="iosDownload" v-if="tip">
      <a class="btn" :href="iosHref" :title="title">{{$t('m.download')}}</a>
    </div>
    <div class="toastImg" v-if="toastImg">
      <img src="@/assets/img/common/cover.png" alt />
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      title: "",
      toastImg: false,
      tip: false,
      androidHref: "",
      iosHref: "",
      flag: true
    };
  },
  created() {
    this.$store.state.updatePop = false;
    this.changeTitle(this.$t("m.download"));
    // this.iosHref = window.location.origin + "/download/ios/wc.mobileconfig";
    // this.androidHref = window.location.origin + "/download/android/fuze.apk";
    this.iosHref = "https://vchub.online/download/ios/wc.mobileconfig";
    this.androidHref = "https://vchub.online/download/android/fuze.apk";
    var browser = {
      versions: (function() {
        var u = navigator.userAgent,
          app = navigator.appVersion;
        return {
          //移动终端浏览器版本信息
          trident: u.indexOf("Trident") > -1, //IE内核
          presto: u.indexOf("Presto") > -1, //opera内核
          webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
          gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
          mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
          android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或uc浏览器
          iPhone: u.indexOf("iPhone") > -1, //是否为iPhone或者QQHD浏览器
          iPad: u.indexOf("iPad") > -1, //是否iPad
          webApp: u.indexOf("Safari") == -1 //是否web应该程序，没有头部与底部
        };
      })()
    };
    function myBrowser() {
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
      var isOpera = userAgent.indexOf("Opera") > -1;
      if (isOpera) {
        return "Opera";
      } //判断是否Opera浏览器
      if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
      } //判断是否Firefox浏览器
      if (userAgent.indexOf("Chrome") > -1) {
        return "Chrome";
      }
      if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
      } //判断是否Safari浏览器
    }
    //以下是调用上面的函数
    var mb = myBrowser();
    if ("Safari" == mb) {
      this.title = "iPhone";
      this.tip = true;
    }
    if (browser.versions.mobile) {
      var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        //在微信中打开
        this.toastImg = true;
      }
      if (browser.versions.iPhone || browser.versions.ios) {
        this.title = "iPhone";
        this.tip = true;
      } else if (browser.versions.android) {
        this.title = "android";
        this.tip = false;
      }
    }
  },
  components: { Header },
  computed: {},
  mounted() {},
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    downloadAndroid() {
      //console.log(url);
      if (navigator.userAgent.indexOf("Html5Plus") > -1) {
        //创建下载管理对象
        let _that = this;
        if (this.flag) {
          plus.nativeUI.toast("下载中，请稍候…");
          _that.flag = false;
          var dtask = plus.downloader.createDownload(
            this.androidHref,
            {},
            function(d, status) {
              // 下载完成
              if (status == 200) {
                //下载成功后的回调函数
                _that.flag = true;
                plus.nativeUI.toast("下载成功，准备安装" + d.filename);
                //安装程序，第一个参数是路径，默认的下载路径在_downloads里面
                plus.runtime.install(
                  "_downloads/fuze.apk",
                  {},
                  function() {
                    // plus.nativeUI.toast("安装成功");
                  },
                  function() {
                    // plus.nativeUI.toast("安装失败");
                  }
                );
                plus.nativeUI.closeWaiting();
              } else {
                alert("下载失败 " + status);
              }
            }
          );
          //dtask.addEventListener( "statechanged", onStateChanged, false );
          dtask.start(); //开始下载任务
        } else {
          plus.nativeUI.toast("下载中，请稍候…");
        }
      } else {
        window.location.href = this.androidHref;
      }
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#myCode {
  height: 100%;
  width: 100%;
  overflow: hidden;
  .rootMain {
    top: 0.88rem;
    height: 100%;
    overflow-y: auto;
    height: calc(100% - 0.88rem);
    &.ios {
      height: calc(100% - 1.88rem);
    }
  }
  .iosDownload {
    position: absolute;
    width: 100%;
    height: 1rem;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      margin: 0 auto;
    }
  }
  .help {
    padding: 0.2rem 0.5rem;
    p {
      margin: 0.2rem 0;
      img {
        max-width: 80%;
        display: block;
        margin: 0 auto;
      }
    }
  }
  .mian {
    width: 100%;
    height: 100%;
    .top {
      height: 100%;
      width: 100%;
      text-align: center;
      background-image: url("~@/assets/img/fuze/downloadbg.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      > div {
        p {
          width: 100%;
          position: absolute;
          top: 60%;

          a {
            margin: 0 auto;
            width: 90%;
            height: 0.88rem;
            display: inline-block;
            line-height: 0.88rem;
            font-size: 0.32rem;
            font-weight: bold;
            letter-spacing: 0.05rem;
            text-align: center;
            border-radius: 0.4rem;
            color: #fff;
            background: linear-gradient(to right, #43434e, #727181);
          }
        }
        .tips {
          margin: 0 auto;
          padding-top: 0.4rem;
          width: 6rem;
          text-align: left;
          line-height: 0.36rem;
          color: #666;
          b {
            color: red;
          }
        }
      }
    }
  }
  .toastImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
    img {
      width: 3.4rem;
      height: 2.42rem;
    }
  }
}
</style>